<template>
  <div class="app-container">

    <el-form :inline="true" :model="userQuery,userList" class="demo-form-inline">
      <el-form-item label="用户真实姓名">
        <el-input v-model="userQuery.rname" placeholder="请输入用户真实姓名"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getUsersList()" icon="el-icon-search">查询</el-button>
        <el-button type="warning" @click="refresh()" icon="el-icon-refresh">重置</el-button>
        <router-link :to="'/systemManager/saveUser'">
          <el-button type="success" icon="el-icon-plus">添加用户</el-button>
        </router-link>
        <el-button type="info" icon="el-icon-edit-outline" @click="updateUser(userList.ids)"> 修改用户</el-button>
        <el-button type="danger" icon="el-icon-delete" @click="deleteUserId(userList.ids)">删除用户</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="userList"
      style="width: 100%"
      :row-class-name="tableRowClassName"
      @selection-change="getUserId"
    >

      <el-table-column
        prop="id"
        type="selection"
        width="30">
      </el-table-column>

      <el-table-column
        label="编号"
        width="50"
        show-overflow-tooltip
        align="center">
        <template slot-scope="scope">
          {{ (current - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="lname"
        label="登录名称"
        width="116"
        show-overflow-tooltip
        align="center">
      </el-table-column>
      <el-table-column
        prop="rname"
        label="真实名字"
        width="116"
        align="center"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="50"
        align="center"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="gender"
        label="性别"
        width="50"
        align="center"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="180"
        align="center"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话"
        width="116"
        align="center"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="department"
        label="部门"
        width="116"
        align="center"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="position"
        label="职务"
        width="150"
        align="center"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="card"
        label="身份证"
        width="150"
        align="center"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="birthday"
        label="生日"
        width="180"
        align="center"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="entrytime"
        label="入职时间"
        width="180"
        align="center"
        show-overflow-tooltip
        value-format="yyyy-MM-dd"
      >
        <!--      <template #default="scope">{{entrytime | formatTimer}}</template>-->
      </el-table-column>
      <el-table-column
        prop="isdisable"
        label="是否启用"
        width="116"
        align="center"
        show-overflow-tooltip>
      </el-table-column>

      <!--      prop="operation"-->
      <el-table-column
        label="操作"
        width="116"
        align="center"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="initPassword(scope.row.id)"
          >密码重置
          </el-button>
        </template>


      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="total,prev, pager, next,jumper"
      :total="total"
      :current-page="current"
      :page-size="limit"
      style="padding: 30px 0; text-align: center"
      @current-change="getUsersList"
    >
    </el-pagination>


  </div>
</template>

<script>
import userApi from "@/api/userManager";
export default {
  name: "userList",
  data() {
    return {

      current: 1, //-- 当前页
      limit: 10, //-- 每页多少条
      userList: null, //-- 用户列表
      total: 0, //-- 总记录数
      user: {},
      userQuery: {},
      multipleSelection: [],
      ids: ''
    }
  },


  methods: {
    //添加用户
    saveUser() {

    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getUsersList(current = 1) {
      this.current = current
      userApi.getUserList(this.current, this.limit, this.userQuery).then((response) => {
        console.log("获取用户列表成功！");
        this.userList = response.data.items;
        this.total = response.data.total;
        console.log(this.userList);
        console.log(this.total);
      })
    },
    //   重置查询内容
    refresh() {
      this.userQuery = {},
        this, this.getUsersList()

    },
    //删除用户根据id
    deleteUserId(id) {
      if (id != null) {

      this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        userApi.removeUserById(id).then((response) => {
          this.getUsersList()
          this.$message({
            type: "success",
            message: "删除成功!",
          });

        })
      })
    }else {
        this.$confirm("请选中记录", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
      }


    },
    //用户密码重置
    initPassword(id) {
      if(id!=null) {
        this.$confirm("此操作将该用户密码初始化, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          userApi.initPassword(id).then((response) => {
            // this.getUsersList()
            this.$message({
              type: "success",
              message: "密码重置成功!",
            });

          })
        })
      }else {
        this.$confirm("请选中记录", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
      }
    },
    updateUser(id) {
      if(id!=null) {
        this.$router.push({path: "/systemManager/updateUser/" + id})
      }else {
        this.$confirm("请选中记录", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
      }
    },

    getUserId(id) {
      this.ids = []
      for (let i = 0; i < id.length; i++) {
        this.ids.push(id[i].id)
      }
      this.userList.ids = this.ids
      console.log(this.ids)
    }
  },

  created() {
    this.getUsersList()
  },



}
</script>

<style >

</style>
